<!-- 饼状图 -->
<template>
  <div id="pie"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, reactive, watch } from "vue";
import { useStore } from "@/store/useStore";

const store = useStore();

const option = reactive({
  title: {
    text: "主要功能建筑面积",
    left: '16',
  },
  tooltip: {
    trigger: 'item'
  },
  toolbox: {
    show: true,
    //orient: 'vertical',
    left: 'right',
    top: 'top',
    feature: {
      saveAsImage: {}
    }
  },
  legend: {
    top: '10%',
    orient: 'vertical',
    left: 'right'
  },
  series: [
    {
      name: '主要功能建筑面积',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      minAngle: 10,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 万㎡';
        }
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
      ]
    }
  ]
});

const setSearchFields = (name) => {
  var obj = store.searchParams;
  if (store.searchParams.field_map_operates.find(item => item.field === 'fwgn')) {
    obj.field_map_operates = obj.field_map_operates.filter(item => item.field !== 'fwgn');
  }
  obj.field_map_operates.push({ field: 'fwgn', operate: 'equals', value: name });
  store.setSearchParams(obj);
}
let pie = null;

watch(() => store.dataByGn, () => {
  if (store.dataByGn) {
    option.series[0].data = store.dataByGn.map(item => { return { value: (item.value / 10000).toFixed(2), name: item.name } });
  }
  pie.dispose();
  pie = echarts.init(document.getElementById("pie"));
  option && pie.setOption(option);
  pie.on('click', (params) => {
    setSearchFields(params.name);
  });
})

onMounted(() => {
  pie = echarts.init(document.getElementById("pie"));
  option && pie.setOption(option);
});
</script>

<style scoped>
#pie {
  width: 100%;
  height: 100%;
}
</style>
